<script setup>
import { getVIPpay } from '@/api/pay'
import { useStore } from 'vuex'

import { ref, watch } from 'vue'
import CountDrown from '../../libs/CountDrown/CountDrown.vue'
const VIPdata = ref({})

// 定义一个异步函数来获取 VIP 支付数据
const fetchVIPPayData = async () => {
  try {
    const res = await getVIPpay()
 
    // 可以在这里将获取到的数据赋值给 VIPdata
    VIPdata.value = res
  } catch (error) {
    console.error('获取 VIP 支付数据时出错:', error)
  }
}

// 调用异步函数
fetchVIPPayData()

const currentData = ref({})
const onItemClick = (item) => {
  currentData.value = item
}
</script>
<template>
  <div class="container">
    <h1
      class="text-center text-[34px] font-bold tracking-widest text-yellow-600"
    >
      精选VIP
    </h1>
    <p class="text-center text-lg text-yellow-500">升级精选VIP，畅想所有内容</p>
    <ul class="flex">
      <li
        v-for="item in VIPdata"
        :key="item.id"
        class="border-2 mr-4"
        @click="onItemClick(item)"
      >
        <div class="title text-base text-yellow-800 dark:text-zinc-300">
          {{ item.title }}
        </div>
        <div
          class="price text-[32px] tracking-tighter font-sans font-bold text-yellow-800 dark:text-zinc-300"
        >
          $ {{ item.price }}
        </div>
        <div class="price-old text-xs text-yellow-500 line-through">
          $ {{ item.oldPrice }}
        </div>
      </li>
      <div class="desc">{{ currentData.desc }}</div>
    </ul>
    <div class="pay">支付金额：{{ currentData.price }}</div>
    <CountDrown :time="1000 * 60" @change="console.log(666)" />
    <div class="alipay flex items-center">
      <img src="../../assets/images/alipay.png" class="w-12 mr-2" /><span
        >支付宝支付</span
      >
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
